<template>
  <a-table
    :columns="columns"
    :row-key="record => record.host"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template slot="name" slot-scope="name"> {{ name }} </template>
    <template slot="tags" slot-scope="tags">{{tags}}</template>
    <template slot="paths" slot-scope="paths">
      <div v-for="path in paths" :key="path">{{path}}</div>
    </template>
    <template slot="protocols" slot-scope="protocols">
      <div v-for="protocol in protocols" :key="protocol">{{protocol}}</div>
    </template>
    <template slot="methods" slot-scope="methods">
      <div v-for="method in methods" :key="method">{{method}}</div>
    </template>
  <template slot="regexPriority" slot-scope="regexPriority">{{regexPriority}}</template>

    <a slot="action" >routes</a>
  </a-table>
</template>
<script>
import axios from 'axios';

const queryData = params => {
  let serviceId=params.serviceId
  return axios.get('http://172.16.109.44:9725/services/'+serviceId+"/routes", { params: params });
};
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: '20%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Host',
    dataIndex: 'hosts',
  },
  {
    title: 'Paths',
    dataIndex: 'paths',
    width: '20%',
    scopedSlots: { customRender: 'paths' },
  },
  {
    title: 'Protocols',
    dataIndex: 'protocols',
    width: '20%',
    scopedSlots: { customRender: 'protocols' },
  },
  {
    title: 'methods',
    dataIndex: 'methods',
    width: '20%',
    scopedSlots: { customRender: 'methods' },
  },
  {
    title: 'regexPriority',
    dataIndex: 'regexPriority',
    width: '20%',
    scopedSlots: { customRender: 'regexPriority' },
  },
  {
    title: 'Tags',
    dataIndex: 'tags',
    width: '20%',
    scopedSlots: { customRender: 'tags' },
  },
];

export default {
  name: 'RouteListByService',
  data() {
    return {
      data: [],
      pagination: false,
      loading: false,
      columns,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      // const pager = { ...this.pagination };
      // pager.current = pagination.current;
      // this.pagination = pager;
      this.fetch({
        // results: pagination.pageSize,
        // page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      console.log("serviceId:"+this.$route.query.serviceId) 
  let serviceId=this.$route.query.serviceId
      this.loading = true;
      queryData({
        results: 10,
        serviceId:serviceId,
        ...params,
      }).then(({ data }) => {
        console.log(data)
        // const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        // pagination.total = 200;
        this.loading = false;
        this.data = data;
        // this.pagination = pagination;
      });
    },
  },
};
</script>
